document.addEventListener('DOMContentLoaded', function () {
    const video = document.getElementById('video');
    const play = document.getElementById('play');
    const stop = document.getElementById('stop');
    const progress = document.getElementById('progress');
    const timestamp = document.getElementById('timestamp');

    
    function toggleVideoStatus() {
        if (video.paused) {
            video.play();
        } else {
            video.pause();
        }
    }

   
    function updatePlayIcon() {
        play.innerHTML = video.paused ? '<i class="fa fa-play fa-2x"></i>' : '<i class="fa fa-pause fa-2x"></i>';
    }

    
    function updateProgress() {
        progress.value = (video.currentTime / video.duration) * 100;

        const mins = Math.floor(video.currentTime / 60).toString().padStart(2, '0');
        const secs = Math.floor(video.currentTime % 60).toString().padStart(2, '0');
        timestamp.innerHTML = `${mins}:${secs}`;
    }


    function setVideoProgress() {
        video.currentTime = (progress.value * video.duration) / 100;
    }


    function stopVideo() {
        video.currentTime = 0;
        video.pause();
    }


    function initialize() {
        progress.value = 0;
        updatePlayIcon();
    }


    video.addEventListener('click', toggleVideoStatus);
    video.addEventListener('pause', updatePlayIcon);
    video.addEventListener('play', updatePlayIcon);
    video.addEventListener('timeupdate', updateProgress);
    video.addEventListener('loadedmetadata', initialize);
    play.addEventListener('click', toggleVideoStatus);
    stop.addEventListener('click', stopVideo);
    progress.addEventListener('change', setVideoProgress);
});
